
<template>
  <div class="orgTree">
    <addHeader :title="'组织架构'" :btnName="'新增'" @click="goAdd" :hasBtn="false"></addHeader>
    <div class="treeBody">
      <commonOrgTree ref="commonOrgTree" @getSelectNode="getSelectNode"></commonOrgTree>
    </div>
    <el-dialog
        title="新增"
        :visible.sync="dialogVisible"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        width="500px">
      <orgForm ref="orgForm"></orgForm>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="addOrg">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import addHeader from "../../common/addHeader";
import orgForm from "./orgForm";
import commonOrgTree from "../../common/commonOrgTree";
export default {
  name: "orgTree",
  components:{
    addHeader,
    commonOrgTree,
    orgForm
  },
  methods:{
    goAdd(){
      let node = this.$refs.commonOrgTree.selectNode
      if(node == null){
        this.$message.warning('请选择父级节点')
        return;
      }
      this.dialogVisible = true
      this.$nextTick(()=>{
        this.$refs.orgForm.form.parentId = node.id
        this.$refs.orgForm.form.parentName = node.orgName
      })
    },
    getSelectNode(node){
      this.$emit('getSelectNode',node)
    },
    addOrg(){
      this.$refs.orgForm.validate().then(res=>{
        let params = {
          "description": this.$refs.orgForm.form.description,
          "orderby":this.$refs.orgForm.form.orderby,
          "orgName": this.$refs.orgForm.form.orgName,
          "parentId":this.$refs.orgForm.form.parentId,
        }
        this.$api.addOrg(params).then(res=>{
          this.$message.success('新增成功')
          this.$refs.commonOrgTree.getOrgTree();
          this.$emit('afterAdd',res.data)
          this.dialogVisible = false
        })
      })

    },
  },
  data() {
    return {
      dialogVisible:false
    };
  },
}
</script>

<style scoped lang="less">
.el-tree{
  background-color: transparent;

}
.orgTree{
  width:200px;
  height: 100%;
  //border:1px solid black;
  border-right: 1px solid #eee;
  .treeBody{
    width:100%;
    height: calc(100% - 49px);
    background-color:#fafafa;

    overflow-y: auto;
  }
}
</style>